<!-- 单柱状图 -->
<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "SingleBar",
  props: {
    id: {
      required: true,
      type: String,
      default: "single-bar",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: String,
      default: "rgba(39, 129, 206, 1)",
    },
    chartData: {
      type: Array,
      default() {
        return [
          // { value: 1048, name: "股东1" },
          // { value: 735, name: "股东2" },
          // { value: 580, name: "股东3" },
          // { value: 484, name: "股东4" },
          // { value: 300, name: "股东5" },
          // { value: 484, name: "股东6" },
          // { value: 300, name: "股东7" },
          // { value: 484, name: "股东8" },
          // { value: 300, name: "股东9" },
          // { value: 300, name: "股东10" },
        ];
      },
    },
  },
  watch: {
    chartData: {
      handler: function (newValue, oldValue) {
        this.getChart();
        if (this.chart) {
          window.addEventListener("resize", this.chart.resize);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  beforeDestroy() {
    if (!this.chart) return;
    this.chart.dispose();
    this.chart = null;
  },
  created() {},
  methods: {
    getChart() {
      let legendData = [];
      let seriesData = [];
      this.chartData.forEach((element, index) => {
        legendData.push(element.name);
      });
      seriesData = {
        type: "pie",
        radius: "80%",
        data: this.chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      };
      this.chart = echarts.init(this.$refs[this.id]);
      var option = {
        tooltip: {
          show: true,
          textStyle: {
            fontSize: 10,
          },
        },
        backgroundColor: "rgb(255,255,255,0)",
        legend: {
          show: true,
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#E3F1FD",
          },
          data: legendData,
          type: "scroll",
          orient: "vertical",
          left: "5%",
          y: "center",
        },
        grid: [
          {
            left: "5%",
            right: "5%",
            top: "20%",
            bottom: "10%",
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: this.chartData.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              align: "left",
              fontSize: 12,
              fontWeight: 400,
              color: "#E3F1FD",
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              color: "#9BAEC3",
              fontSize: 12,
              padding: 0,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#9BAEC3",
              margin: 0,
            },
            splitLine: {
              lineStyle: {
                color: "#60686F",
                type: "dashed",
              },
            },
          },
        ],
        series: seriesData,
      };
      option && this.chart.setOption(option, true);
    },
  },
};
</script>

<style lang="scss" scoped></style>
